<template>
  <div id="main">
    <!-- 头部 -->
    <div class="header">
      <div class="mainheader">
        <span class="iconfont icon-rili font_4"></span>
        <div class="navSearch">
          <input type="text" class="pad_lr725 font_22" placeholder="请输入课程名称" />
          <span class="iconfont icon-sousuo font_3 color_ddd pad_lr18 mar_l1"></span>
        </div>
        <span class="iconfont icon-xinfeng font_49"></span>
      </div>
    </div>
    <section>
      <!-- benner图片轮播 -->
      <div class="benner">
        <div
          class="bennerBox"
          :style="`transform:translate(${bennerLeft}px,0);transition-duration: 1000ms;`"
        >
          <img src="@/assets/img/main/lunbo1.png" alt />
          <img src="@/assets/img/main/lunbo2.png" alt />
          <img src="@/assets/img/main/lunbo3.png" alt />
          <img src="@/assets/img/main/lunbo4.png" alt />
        </div>
        <div class="bennerLisWp">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="bennerCard">
          <div class="font_246">
            <div>
              <div class="laba ellipsis">
                <span class="iconfont icon-laba color_f24334"></span>
                <ul :style="`transform:translate(0,${bennerTop}px);`">
                  <li>重磅！国家医保局正式下令：这几类药品踢出医保！</li>
                  <li>敲响警钟！“能力提升”再被强调，2020年考试难度升级！</li>
                  <li>19年执业药师考试“三区三州”分数线已出，最低59分！</li>
                  <li>新《药品管理法》12月1日起执行，法规这些考点要记牢！</li>
                </ul>
              </div>
              <div class="more font_189">
                更多
                <span class="iconfont icon-dibudaohanglan-"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分类 -->
      <div class="mainFour font_254">
        <div
          v-for="(item,index) in majorClassifyArr"
          :key="index"
          @click="jumpRouterByMajor(item.name)"
        >
          <dl>
            <dt>
              <img :src="require(`@/assets/img/main/${item.img}`)" alt />
            </dt>
            <dd>{{item.name}}</dd>
          </dl>
        </div>
      </div>
      <!-- 核心考点班 -->
      <div class="coreWap">
        <div class="moduleTitle pad_t181">
          <div class="font_34">
            核心考点班
            <img class="mar_l181" width="15" height="17" src="@/assets/img/main/hot.png" alt />
          </div>
          <span class="iconfont icon-gengduo font_49"></span>
        </div>
        <div class="coreMain">
          <div class="pad_lr272">
            <div class="mar_t181">
              <ul class="coreMainContext">
                <li v-for="(item,index) in coreArr" :key="index" @click="jumpRouterToDetails(item)">
                  <div class="coreTop">
                    <div class="coreLeft">
                      <img src="@/assets/img/main/hexinimg.png" alt />
                      <span>{{item.typecid}}</span>
                    </div>
                    <div class="coreRight">
                      <div class="coreRightTitel ellipsis">{{item.name}}</div>
                      <div class="coreRightText ellipsis">重点考点逐一讲解 快速提升</div>
                    </div>
                  </div>
                  <div class="coreBottom">
                    <div class="coreBottomLeft">
                      <img src="@/assets/img/main/nobody.png" alt />
                      <span class="teacher">{{item.author}}</span>
                      <span class="student">{{item.studyNum}}</span>
                    </div>
                    <div class="price">￥{{item.price.toFixed(1)}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 历年真题精讲班 -->
      <div class="coreWap">
        <div class="moduleTitle pad_t181">
          <div class="font_34">历年真题精讲班</div>
          <span class="iconfont icon-gengduo font_49"></span>
        </div>
        <div class="coreMain">
          <div class="pad_lr272">
            <div class="mar_t181">
              <ul class="coreMainContext">
                <li
                  v-for="(item,index) in historyArr"
                  :key="index"
                  @click="jumpRouterToDetails(item)"
                >
                  <div class="coreTop">
                    <div class="coreLeft">
                      <img src="@/assets/img/main/zhenti.png" alt />
                      <span>{{item.typecid}}</span>
                    </div>
                    <div class="coreRight">
                      <div class="coreRightTitel ellipsis">{{item.name}}</div>
                      <div class="coreRightText ellipsis">重点考点逐一讲解 快速提升</div>
                    </div>
                  </div>
                  <div class="coreBottom">
                    <div class="coreBottomLeft">
                      <img src="@/assets/img/main/nobody.png" alt />
                      <span class="teacher">{{item.author}}</span>
                      <span class="student">{{item.studyNum}}</span>
                    </div>
                    <div class="price">￥{{item.price.toFixed(0)}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 冲刺串讲班 -->
      <div class="coreWap">
        <div class="moduleTitle pad_t181">
          <div class="font_34">冲刺串讲班</div>
          <span class="iconfont icon-gengduo font_49"></span>
        </div>
        <div class="coreMain">
          <div class="pad_lr272">
            <div class="mar_t181">
              <ul class="coreMainContext">
                <li
                  v-for="(item,index) in sprintArr"
                  :key="index"
                  @click="jumpRouterToDetails(item)"
                >
                  <div class="coreTop">
                    <div class="coreLeft">
                      <img src="@/assets/img/main/chongci.png" alt />
                      <span>{{item.typecid}}</span>
                    </div>
                    <div class="coreRight">
                      <div class="coreRightTitel ellipsis">{{item.name}}</div>
                      <div class="coreRightText ellipsis">重点考点逐一讲解 快速提升</div>
                    </div>
                  </div>
                  <div class="coreBottom">
                    <div class="coreBottomLeft">
                      <img src="@/assets/img/main/nobody.png" alt />
                      <span class="teacher">{{item.author}}</span>
                      <span class="student">{{item.studyNum}}</span>
                    </div>
                    <div class="price">￥{{item.price.toFixed(0)}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 推荐套餐 -->
      <div class="coreWap">
        <div class="moduleTitle pad_t181">
          <div class="font_34">推荐套餐</div>
          <span class="iconfont icon-gengduo font_49"></span>
        </div>
        <div class="coreMain">
          <div class="pad_lr272">
            <div class="mar_t181">
              <ul class="coreMainContext">
                <li
                  v-for="(item,index) in suggestArr"
                  :key="index"
                  @click="jumpRouterToDetails(item)"
                >
                  <div class="coreTop">
                    <div class="coreLeft">
                      <img src="@/assets/img/main/tuijian.png" alt />
                      <span>{{item.typecid}}</span>
                    </div>
                    <div class="coreRight">
                      <div class="coreRightTitel ellipsis">{{item.name}}</div>
                      <div class="coreRightText ellipsis">重点考点逐一讲解 快速提升</div>
                    </div>
                  </div>
                  <div class="coreBottom">
                    <div class="coreBottomLeft">
                      <img src="@/assets/img/main/nobody.png" alt />
                      <span class="teacher">{{item.author}}</span>
                      <span class="student">{{item.studyNum}}</span>
                    </div>
                    <div class="price">￥{{item.price}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 底部 -->
    <footerFiexd active="首页" />
  </div>
</template>

<script>
import footerFiexd from "@/components/footerFiexd.vue";
import { mapActions, mapState } from "vuex";
import { setMajor } from "@/utils/cookies.js";
export default {
  data() {
    return {
      bennerLeft: 0,
      bennerTop: 0,
      majorClassifyArr: [
        {
          name: "中药学",
          img: "zhongyaoxue.png",
        },
        {
          name: "药学",
          img: "yaoxue.png",
        },
        {
          name: "法规",
          img: "fagui.png",
        },
        {
          name: "更多",
          img: "gengduo.png",
        },
      ],
    };
  },
  methods: {
    ...mapActions("main", [
      "getSuggestData",
      "getSprintData",
      "getHistoryData",
      "getCoreData",
    ]),
    //   首页
    goMainRouter() {
      this.$router.push("/");
    },
    //   我的
    goMineRouter() {
      this.$router.push("/user");
    },
    // 分类
    jumpRouterByMajor(name) {
      setMajor(name);
      if (name == "更多") {
        this.$router.push({ name: "MainMore" });
      } else {
        this.$router.push({ name: "MainMajor" });
      }
    },
    // 跳转到详情页
    jumpRouterToDetails(form) {
      // console.log(form);
      this.$router.push({
        name: "Datas",
        params: {
          form,
        },
      });
    },
    // 滚动事件
    isScrollFn() {
      let benner = document.querySelector(".benner"),
        header = document.querySelector(".header");
      if (!benner) return;
      let bennerHeight = benner.offsetHeight;
      if (document.documentElement.scrollTop >= bennerHeight) {
        header.style.background =
          "linear-gradient(to right,#3e83e5 0,#63aeff 100%)";
      } else {
        header.style.background =
          "linear-gradient(to bottom,rgba(0,0,0,0.35) 1%,rgba(0,0,0,0) 98%,rgba(0,0,0,0) 100%)";
      }
    },
    // benner轮播
    bennerFn() {
      let i = 0,
        k = 0,
        timer,
        bennerWid = document.getElementsByClassName("benner")[0].offsetWidth,
        len = document.querySelectorAll(".bennerBox>img").length,
        lis = document.querySelectorAll(".bennerLisWp>ul>li"),
        bennerCardLisLen = document.querySelectorAll(".laba>ul>li").length,
        labaHeight = document.getElementsByClassName("laba")[0].offsetHeight;
      lis[0].className = "bennerActive";
      setInterval(() => {
        i++;
        k++;
        for (let j = 0; j < lis.length; j++) {
          lis[j].className = "";
        }
        if (i == len) {
          i = 0;
        }
        if (k == bennerCardLisLen) {
          k = 0;
        }
        lis[i].className = "bennerActive";
        this.bennerLeft = -bennerWid * i;
        this.bennerTop = -labaHeight * k;
      }, 3000);
    },
  },
  mounted() {
    //   核心考点
    this.getCoreData();
    //   历史真题
    this.getHistoryData();
    //   获取冲刺数据
    this.getSprintData();
    //   获取随机四条推荐数据
    this.getSuggestData();
    //   滚动事件
    window.addEventListener("scroll", this.isScrollFn, false); // 监听（绑定）滚轮滚动事件
    //   图片轮播
    this.bennerFn();
  },
  computed: {
    ...mapState("main", ["suggestArr", "sprintArr", "historyArr", "coreArr"]),
  },
  components: { footerFiexd },
};
</script>

<style scoped src="../.././css/main.css"></style>
<style scoped src="../.././css/main/same.css"></style>
<style scoped src="../.././css/main/iconfont.css"></style>
<style scoped src="../.././css/main/main.css"></style>